<template>
  <div class="mx-10">
    <div>count:{{ countStore.num }}</div>
    <div>count:{{ refCount.num }}</div>
    <div>
      <p>x:{{ x }}</p>
      <p>y:{{ y }}</p>
    </div>
    <div>
      <el-button>Ok!!</el-button>
    </div>
    <app-icon icon="akar-icons:search" />
    <app-icon icon="el:search" />
    <app-icon icon="mdi:abjad-hebrew" />
    <div>
      <!-- <button @click="refCount.num += 1">+1</button> -->
      <button class="px-2 py-1 text-white bg-green-300 rounded" @click="countStore.increment()">
        +1
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import useCountStore from '@/store/modules/useCountStore';
  import { storeToRefs } from 'pinia';
  import AppIcon from '@/components/common/AppIcon.vue';
  import useMouse from '@/hooks/useMouse';
  const countStore = useCountStore();
  const refCount = storeToRefs(countStore);
  console.log(import.meta.env.VITE_API_URL);
  const { x, y } = useMouse();
</script>

<style scoped></style>
